<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="ruleForm.sex" :label="1">男</el-radio>
          <el-radio v-model="ruleForm.sex" :label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item label="职业" prop="occupation">
          <el-input v-model="ruleForm.occupation"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="住址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="配镜日期" prop="matchingTime">
          <el-date-picker v-model="ruleForm.matchingTime" type="date" placeholder="配镜日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="取镜日期" prop="takeTime">
          <el-date-picker v-model="ruleForm.takeTime" type="date" placeholder="取镜日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="球镜R/L"> -->
        <el-form-item label="右眼度数">
          <el-input v-model="ruleForm.rightEyeDegrees"></el-input>
        </el-form-item>
        <!-- <el-form-item label="柱镜R/L"> -->
        <el-form-item label="右眼矫正视力">
          <el-input v-model="ruleForm.rightEyeCorrect"></el-input>
        </el-form-item>
        <!-- <el-form-item label="轴向R/L"> -->
        <el-form-item label="左眼度数">
          <el-input v-model="ruleForm.leftEyeDegrees"></el-input>
        </el-form-item>
        <!-- <el-form-item label="下加光R/L"> -->
        <el-form-item label="左眼矫正视力">
          <el-input v-model="ruleForm.leftEyeCorrect"></el-input>
        </el-form-item>
        <!-- <el-form-item label="瞳距R/L"> -->
        <el-form-item label="瞳距">
          <el-input v-model="ruleForm.pupillaryDistance"></el-input>
        </el-form-item>
        <!-- <el-form-item label="矫正视力R/L"> -->
        <el-form-item label="下加光">
          <el-input v-model="ruleForm.downlight"></el-input>
        </el-form-item>
        <el-form-item label="原镜光度R/L">
          <el-input v-model="ruleForm.primaryMirrorLuminosity"></el-input>
        </el-form-item>
        <el-form-item>
        </el-form-item>
        <el-form-item label="镜架名称">
          <el-input v-model="ruleForm.eyeFrameName"></el-input>
        </el-form-item>
        <el-form-item label="镜架价格（元）">
          <el-input v-model="ruleForm.eyeFramePrice"></el-input>
        </el-form-item>
        <el-form-item label="镜片名称">
          <el-input v-model="ruleForm.LensName"></el-input>
        </el-form-item>
        <el-form-item label="镜片价格（元）">
          <el-input v-model="ruleForm.LensPrice"></el-input>
        </el-form-item>
        <el-form-item label="太阳镜名称">
          <el-input v-model="ruleForm.SunglassesName"></el-input>
        </el-form-item>
        <el-form-item label="太阳镜价格（元）">
          <el-input v-model="ruleForm.SunglassesPrice"></el-input>
        </el-form-item>
        <el-form-item label="其他">
          <el-input v-model="ruleForm.otherName"></el-input>
        </el-form-item>
        <el-form-item label="其他价格（元）">
          <el-input v-model="ruleForm.otherPrice"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="ruleForm.remarks"></el-input>
        </el-form-item>
        <el-form-item label="总价" prop="allPrice">
          <el-input v-model="ruleForm.allPrice"></el-input>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button type="info" @click="$router.go(-1)">返回</el-button>
        <el-button type="primary" @click="save" v-if="!edit && !id">保存</el-button>
        <el-button type="primary" @click="editSave" v-if="edit">修改</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      var testPhone = (rule, value, callback) => {
        const reg = /^1[3456789]\d{9}$/
        if (value == "") callback();
        if (!reg.test(value)) {
          return callback(new Error('输入格式不正确，请输入手机号码'));
        }
        callback();
      };
      return {
        id: "",
        edit: false,
        ruleForm: {
          name: "",
          sex: 1, // 0 女  1 男
          age: "",
          occupation: "",
          phone: "",
          address: "",
          matchingTime: "",
          takeTime: "",
          rightEyeDegrees: "",
          rightEyeCorrect: "",
          leftEyeDegrees: "",
          leftEyeCorrect: "",
          pupillaryDistance: "",
          downlight: "",
          primaryMirrorLuminosity: "",
          eyeFrameName: "",
          eyeFramePrice: "",
          LensName: "",
          LensPrice: "",
          SunglassesName: "",
          SunglassesPrice: "",
          otherName: "",
          otherPrice: "",
          remarks: "",
          allPrice: "",
        },
        rules: {
          name: [{
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }],
          sex: [{
            required: true,
            message: "请输入性别",
            trigger: "blur"
          }],
          age: [{
            required: true,
            message: "请输入年龄",
            trigger: "blur"
          }],
          phone: [{
            required: true,
            message: "请输入电话",
            trigger: "blur"
          }, {
            validator: testPhone,
            trigger: 'blur'
          }],
          matchingTime: [{
            required: true,
            message: "请选择配镜日期",
            trigger: "blur"
          }],
          takeTime: [{
            required: true,
            message: "请选择取镜日期",
            trigger: "blur"
          }],
          allPrice: [{
            required: true,
            message: "请输入总价",
            trigger: "blur"
          }]
        }
      };
    },
    created() {},
    mounted() {

      this.id = this.$route.query.id || this.$route.query.editId
      const editId = this.$route.query.editId
      if (this.id) this.getItem(this.id)
      if (editId) this.getItem(editId)
      if (editId) this.edit = true

    },
    methods: {
      save() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if (this.$store.state.status === 'add') {
              // 新增
              this.getData()
            } else {
              // 修改
              this.resetData()
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      async getData() {
        const {
          data: res
        } = await this.$http({
          url: "add/person",
          method: 'post',
          data: {
            name: this.ruleForm.name,
            sex: this.ruleForm.sex,
            age: this.ruleForm.age,
            occupation: this.ruleForm.occupation,
            phone: this.ruleForm.phone,
            address: this.ruleForm.address,
            matchingTime: this.ruleForm.matchingTime,
            takeTime: this.ruleForm.takeTime,
            rightEyeDegrees: this.ruleForm.rightEyeDegrees,
            rightEyeCorrect: this.ruleForm.rightEyeCorrect,
            leftEyeDegrees: this.ruleForm.leftEyeDegrees,
            leftEyeCorrect: this.ruleForm.leftEyeCorrect,
            pupillaryDistance: this.ruleForm.pupillaryDistance,
            downlight: this.ruleForm.downlight,
            primaryMirrorLuminosity: this.ruleForm.primaryMirrorLuminosity,
            eyeFrameName: this.ruleForm.eyeFrameName,
            eyeFramePrice: this.ruleForm.eyeFramePrice,
            LensName: this.ruleForm.LensName,
            LensPrice: this.ruleForm.LensPrice,
            SunglassesName: this.ruleForm.SunglassesName,
            SunglassesPrice: this.ruleForm.SunglassesPrice,
            otherName: this.ruleForm.otherName,
            otherPrice: this.ruleForm.otherPrice,
            remarks: this.ruleForm.remarks,
            allPrice: this.ruleForm.allPrice
          },
        })
        this.$message.success("添加成功！")
        this.$router.push("/user")
      },
      // 获取每一条数据（编辑用）
      async getItem(id) {
        const {
          data: res
        } = await this.$http({
          url: "/get/person/" + id,
          method: "get"
        })
        console.log(res);
        this.ruleForm = res
      },
      async editSave() {
        const {
          data: res
        } = await this.$http({
          url: "/upDate/person/" + this.id,
          method: 'put',
          data: {
            name: this.ruleForm.name,
            sex: this.ruleForm.sex,
            age: this.ruleForm.age,
            occupation: this.ruleForm.occupation,
            phone: this.ruleForm.phone,
            address: this.ruleForm.address,
            matchingTime: this.ruleForm.matchingTime,
            takeTime: this.ruleForm.takeTime,
            rightEyeDegrees: this.ruleForm.rightEyeDegrees,
            rightEyeCorrect: this.ruleForm.rightEyeCorrect,
            leftEyeDegrees: this.ruleForm.leftEyeDegrees,
            leftEyeCorrect: this.ruleForm.leftEyeCorrect,
            pupillaryDistance: this.ruleForm.pupillaryDistance,
            downlight: this.ruleForm.downlight,
            primaryMirrorLuminosity: this.ruleForm.primaryMirrorLuminosity,
            eyeFrameName: this.ruleForm.eyeFrameName,
            eyeFramePrice: this.ruleForm.eyeFramePrice,
            LensName: this.ruleForm.LensName,
            LensPrice: this.ruleForm.LensPrice,
            SunglassesName: this.ruleForm.SunglassesName,
            SunglassesPrice: this.ruleForm.SunglassesPrice,
            otherName: this.ruleForm.otherName,
            otherPrice: this.ruleForm.otherPrice,
            remarks: this.ruleForm.remarks,
            allPrice: this.ruleForm.allPrice
          },
        })
        this.$message.success("修改成功！")
        this.$router.push("/user")
      },
    },
  };

</script>

<style lang="less" scoped>
  .el-card {
    padding: 20px 40px;
  }

  .el-form-item {
    width: 50%;
    display: inline-block;

    .el-input {
      width: 300px;
    }

    // /deep/ .el-form-item__label {
    //   width: 120px !important;
    // }
  }

  .btns {
    display: flex;
    justify-content: center;
    margin-top: 60px;

    .el-button {
      width: 100px;
      margin-right: 20px;
    }
  }

</style>
